<template>
	<!-- //纵向排列格式 -->
		<view class="card-container" v-if="cardData.mode === 'column'">
			<view class="card-top">{{cardData.title}}</view>
			<view class="card-center">
				<view class="img-box" v-for="(item,index) in cardData.cover.slice(0,3)" :key="index">
					<img :src="item" alt="" srcset="" />
				</view>
			</view>
			<view class="card-buttom">
				<view class="card-info-type">{{cardData.classify}}</view>
				<view class="card-views">{{cardData.browse_count}}浏览</view>
			</view>
		</view>
	<!-- 横向排列格式 -->
	<view class="card-container2" v-if="cardData.mode === 'base'">
		<view class="card-left"><img :src="cardData.cover[0]" alt="" srcset="" /></view>
		<view class="card-right">
			<view class="card-top">
				<view class="top-title">
					{{cardData.title}}
				</view>
				<img @click="collectEvent" src="/static/img/love.png" alt=""> </view>
				<!-- <view class="card-date">
					{{cardData.create_time}}
				</view> -->
			<view class="card-buttom">
				<view class="card-info-type">{{cardData.classify}}</view>
				<view class="card-views">{{cardData.browse_count}}浏览</view>
			</view>
		</view>
	</view>
	<!-- 大图模式 -->
	<view class="card-container3 list-card mode-image" v-if="cardData.mode === 'image'">
		<view class="list-card-top">
		  <view class="image-container">
		    <image src="https://img1.sycdn.imooc.com/5ccfac620001f8d405000344.jpg" mode="aspectFill"></image>
		  </view>
		</view>
		<view class="list-card-middle">
		  <text>{{cardData.title}}</text>
		</view>
		<view class="list-card-content-desc list-card-bottom">
		  <view class="article-type">
		    {{cardData.classify}}
		  </view>
		  <view class="browse-number">
		    {{cardData.browser_count}}浏览
		  </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const props = defineProps({
		cardData:Object
	});
	
	const cardData = props.cardData
	const collectEvent = ()=>{
		
	}
	
	
</script>


<style lang="scss">
	@import "./css/ListCard.scss";
	//卡片类型为column
	.card-container{
		box-sizing: border-box;
		// height: 300rpx;
		// height: 100%;
		// flex: 1 1;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
		border: 2rpx solid #e2e2e2;
		padding: 20rpx;
		.card-top{
			height: 20%;
			padding: 0 20rpx;
			img{
				width: 35rpx;
			}
		}
		.card-center{
			// height:100%;
			flex:1 1 ;
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			.img-box{
				height: 100%;
				width: 33%;
				padding: 10rpx 10rpx;
				img{
					// object-fit: cover;
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					// border-color: transparent;
				}
			}
		}
		.card-buttom{
			display: flex;
			height: 20%;
			justify-content: space-between;
			padding: 0 20rpx;
			.card-info-type{
				font-size: 16rpx;
				color: #d10000;
				border: 1rpx solid #d10000;
				border-radius: 30rpx;
				width: 90rpx;
				text-align: center;
				line-height: 1rem;
			}
			.card-views{
				font-size: 20rpx;
				line-height: 1rem;
				text-align: center;
				color: #acacac;
			}
		}
	}
	// 卡片类型为base
	.card-container2{
		display: flex;
		padding: 18rpx 25rpx;
		.card-left{
					width: 30%;
					// height: 25%;
					img{
						width: 100%;
					}
				}
		.card-right{
			font-size: 25rpx;
			display: flex;
			padding: 0 24rpx;
			flex-direction: column;
			gap: 10rpx;
			.card-top{
				display: flex;
				justify-content: space-between;
				// text-wrap: nowrap;
				img{
					width: 35rpx;
					height: 35rpx;
				}
			}
			.card-buttom{
				display: flex;
				justify-content: space-between;
			}
		}
	}
	//大图模式
</style>